<template>
  <div class="list">
    <Content v-for="item in list" :key="item.id" v-bind="item"></Content>
  </div>
</template>

<script>
import Content from "@/components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  data() {
    return {
      list: [
        { id: 1, title: "美食", detail: ["火锅", "烤肉", "烧烤"] },
        { id: 2, title: "游戏", detail: ["LoL", "DAOTA", "cf"] },
        {
          id: 3,
          title: "电影",
          detail: ["星际穿越", "阿凡达", "菊花怪大战桃花侠"],
        },
      ],
    };
  },
};
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-between;
}
</style>
